<template>
	<zui-box types="2">
		<!-- 头部导航 -->
		<zui-navbar :have_back="false" title="注册" bg="transparent"></zui-navbar>
		<view style="height:150rpx"><!--占地高度 --></view>
		<view class="zui-form">
			<view class="zui_input">
				<u-input
					v-model="account"
					shape="circle"
					:prefixIcon="require('@/static/img/input_icon03.png')"
					placeholder="手机号"
					border="none"
					color="#fff"
					clearable
					type="number"
					maxlength="11"
				>
				<template slot="suffix">
					<u-icon name="photo" color="transparent" size="28"></u-icon>
				</template>
				
				</u-input>
			</view>
			<view class="zui_input">
				<u-input v-model="code" shape="circle" :prefixIcon="require('@/static/img/input_icon04.png')" placeholder="短信验证码" border="none" color="#fff" clearable>
					<template slot="suffix">
						<zui-code type="1" :mobile="account"></zui-code>
					</template>
				</u-input>
			</view>
			<view class="zui_input">
				<u-input
				v-show="!is_passworda"
					v-model="password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="密码"
					border="none"
					clearable
					color="#fff"
					:readonly="!account"
				>
					<template slot="suffix">
						<u-icon v-if="is_passworda" @click="is_passworda = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_passworda" @click="is_passworda = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
				<u-input
				v-show="is_passworda"
					v-model="password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="密码"
					border="none"
					clearable
					color="#fff"
					:password="is_passworda"
					:readonly="!account"
				>
					<template slot="suffix">
						<u-icon v-if="is_passworda" @click="is_passworda = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_passworda" @click="is_passworda = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
			</view>
			<view class="zui_input">
				<u-input
				v-show="!is_passwordb"
					v-model="confirm_password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="确认密码"
					border="none"
					clearable
					color="#fff"
					:readonly="!account"
				>
					<template slot="suffix"> 
						<u-icon v-if="is_passwordb" @click="is_passwordb = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_passwordb" @click="is_passwordb = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
				<u-input
				v-show="is_passwordb"
					v-model="confirm_password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="确认密码"
					border="none"
					clearable
					color="#fff"
					:password="is_passwordb"
					:readonly="!account"
				>
					<template slot="suffix">
						<u-icon v-if="is_passwordb" @click="is_passwordb = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_passwordb" @click="is_passwordb = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
			</view>
			<view class="zui_input">
				<u-input
				v-show="!is_passwordc"
					v-model="trade_password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="支付密码"
					border="none"
					clearable
					color="#fff"
					:readonly="!account"
					maxlength="6"
				>
					<template slot="suffix">
						<u-icon v-if="is_passwordc" @click="is_passwordc = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_passwordc" @click="is_passwordc = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
				<u-input
				v-show="is_passwordc"
					v-model="trade_password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="支付密码"
					border="none"
					clearable
					color="#fff"
					:password="is_passwordc"
					:readonly="!account"
					maxlength="6"
				>
					<template slot="suffix">
						<u-icon v-if="is_passwordc" @click="is_passwordc = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_passwordc" @click="is_passwordc = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
			</view>
			<view class="zui_input">
				<u-input
				v-show="!is_passwordd"
					v-model="confirm_trade_password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="确认支付密码"
					border="none"
					clearable
					maxlength="6"
					color="#fff"
					:readonly="!account"
				>
					<template slot="suffix">
						<u-icon v-if="is_passwordd" @click="is_passwordd = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_passwordd" @click="is_passwordd = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
				<u-input
				v-show="is_passwordd"
					v-model="confirm_trade_password"
					:prefixIcon="require('@/static/img/input_icon02.png')"
					shape="circle"
					placeholder="确认支付密码"
					border="none"
					clearable
					maxlength="6"
					color="#fff"
					:password="is_passwordd"
					:readonly="!account"
				>
					<template slot="suffix">
						<u-icon v-if="is_passwordd" @click="is_passwordd = false" :name="require('@/static/img/eye01.png')"></u-icon>
						<u-icon v-if="!is_passwordd" @click="is_passwordd = true" :name="require('@/static/img/eye02.png')"></u-icon>
					</template>
				</u-input>
			</view>
			<view class="zui_input">
				<u-input
					v-model="invite_code"
					shape="circle"
					:prefixIcon="require('@/static/img/input_icon05.png')"
					placeholder="邀请码"
					border="none"
					color="#fff"
					clearable
				>
				<template slot="suffix">
					<u-icon name="photo" color="transparent" size="28"></u-icon>
				</template>
				</u-input>
			</view>
		</view>

		<view style="height:78rpx"><!--占地高度 --></view>

		<zui-button @fun="save">注册</zui-button>

		<view class="link_btn"><view class="text" @click="xz_go('login')">去登录</view></view>

		<view class="foot_text">
			<view class="zui-check" style="padding: 0;" @click="is_agree = !is_agree">
				<u-icon v-if="is_agree" :name="require('@/static/img/check03.png')"></u-icon>
				<u-icon v-if="!is_agree" :name="require('@/static/img/check04.png')"></u-icon>
				<view class="text">我已阅读并同意</view>
			</view>
			<view class="link" @click="$refs.zui_pop.do_open()">《注册协议》</view>
		</view>

		<zui-pop :title="info.agreement_name" :fun="set_agree" ref="zui_pop">
			<view v-html="info.agreement_detail"></view>
		</zui-pop>
		
		<u-loading-page loadingColor='#24193d'  bg-color="transparent" loadingText='正在注册中...' :loading='is_loading' ></u-loading-page>
			
			
			
	</zui-box>
</template>
<script>
export default {
	data() {
		return {
			account: '',
			code: '',
			password: '',
			confirm_password: '',
			trade_password: '',
			confirm_trade_password: '',
			invite_code: '',

			is_passworda: true, //是否是密码
			is_passwordb: true, //是否是密码
			is_passwordc: true, //是否是密码
			is_passwordd: true, //是否是密码

			is_agree: false, //是否同意用户协议
			tips: '',
			info: {},
			
			is_loading: false ,//是否在登录中
		};
	},
	onLoad(e) {
		if (e.code) {
			this.invite_code = e.code;
		}
		this.getinfo();
	},
	methods: {
		getinfo() {
			uni.$u.http
				.get('/app/agreement/detail?id=1', {
					custom: {
						auth: false,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					this.info = res;
				})
				.catch(err => {});
		},
		save() {
			if (!this.account) {
				return this.say('请输入账号');
			}
			if (!this.code) {
				return this.say('请输入短信验证码');
			}
			if (!this.password) {
				return this.say('请输入密码');
			}
			if (!this.confirm_password) {
				return this.say('请输入确认密码');
			}
			if (this.password != this.confirm_password) {
				return this.say('两次密码输入不一样');
			}
			if (!this.trade_password) {
				return this.say('请输入支付密码');
			}
			if (!this.confirm_trade_password) {
				return this.say('请输入确认支付密码');
			}
			if (this.trade_password != this.confirm_trade_password) {
				return this.say('两次支付密码输入不一样');
			}
			
			if(!this.is_agree){
				return this.$refs.zui_pop.do_open();
			}

			this.is_loading=true
			
			uni.$u.http
				.post(
					'/app/login/register',
					{
						mobile: this.account,
						sms_code: this.code,
						password: this.password,
						confirm_password: this.confirm_password,
						trade_password: this.trade_password,
						confirm_trade_password: this.confirm_trade_password,
						invite_code: this.invite_code
					},
					{
						custom: {
							auth: false,
							toast: true,
							catch: true
						}
					}
				)
				.then(res => {
				
					uni.showToast({
						title: '注册成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.reLaunch({
							url: './login'
						});
					}, 1500);
					setTimeout(() => {
						that.is_loading = false;
					}, 2000);
					
					
				})
				.catch(err => {
					this.is_loading=false
					console.log('处理', err);
				});
		},
		set_agree() {
			this.is_agree = true;
		}
	}
};
</script>
<style lang="scss" scoped>
.zui-form {
	padding: 0 60rpx;

	.zui_input {
		box-sizing: border-box;
		padding: 0 0 0 20rpx;
		border-radius: 104rpx;
		// width: 622rpx;
		background: #3a3050;
		height: 104rpx;
		margin-bottom: 20rpx;

		/deep/.u-input__content__field-wrapper__field {
			// background: red !important;
			height: 104rpx !important;
		}

		/deep/.u-icon__img {
			padding: 24rpx !important;
		}

		/deep/.u-input__content__prefix-icon {
			margin-left: 0 !important;
		}

		/deep/.u-input__content__subfix-icon {
			.u-icon__img {
				margin-right: 20rpx !important;
			}
		}
	}
}

.zui-check {
	display: flex;
	align-items: center;
	padding: 30rpx;

	.text {
		padding: 0 12rpx;
		line-height: 2;
	}
}

.text_button_box {
	font-size: 30rpx;
	color: #9d97a7;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.link {
		padding: 30rpx;
	}
}

//链接按钮
.link_btn {
	display: flex;
	justify-content: center;

	.text {
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #9d97a7;
		padding: 30rpx;
		display: inline-block;
	}
}

.foot_text {
	width: 100%;
	font-size: 30rpx;
	color: #9d97a7;
	padding: 30rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	.link{
		padding: 30rpx 0;
		color: #F1B863;
	}
	
}
</style>
